Previously, the SyntaxHighlight component was hardcoded to use language="javascript" regardless of the actual file type, causing React/TypeScript files to be displayed with incorrect syntax highlighting.

Problem

As shown in the issue, a .tsx file was being highlighted as JavaScript instead of TypeScript:

The React/TypeScript code lacked proper syntax highlighting for:

• TypeScript keywords and types
• JSX elements and attributes
• JSX expressions and syntax

Solution

Added automatic language detection based on file extension:

1. Created getLanguageFromPath.ts - A utility function that maps file extensions to syntax highlighting languages
2. Updated SyntaxHighlight component - Added optional language prop with JavaScript as fallback
3. Modified GithubPermalinkBase component - Uses language detection to pass the correct language to syntax highlighter

Supported Languages

The language detection now supports:

• TypeScript/React: .ts, .tsx → typescript
• JavaScript/React: .js, .jsx → javascript
• Other languages: Python, Go, Java, C++, CSS, HTML, JSON, YAML, and more

After Fix

The React/TypeScript code now displays with proper syntax highlighting:

• ✅ TypeScript keywords like export, function, const
• ✅ JSX elements like <div>, <button>
• ✅ JSX attributes like className
• ✅ TypeScript types like React.PropsWithChildren
• ✅ JSX expressions like {value}

Testing

• Added comprehensive tests for language detection (16 test cases)
• All existing tests continue to pass
• Added new Storybook story demonstrating the fix
• Maintains backward compatibility with JavaScript fallback

Fixes #53.

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.